import React, { useState } from "react";

// 引入石头弹窗
import { StoPopup } from "@steveouyang/sto-ui-react";

export default function PopupDemo() {

  // 用一个state控制要不要显示弹窗
  const [showPopup, setShowPopup] = useState(false);

  return (
    <div>
      <h3>PopupDemo</h3>
      <button onClick={() => setShowPopup(true)}>显示弹窗</button>

      {/* 需要时显示弹窗显示弹窗 */}
      {showPopup && (

        // closer={setShowPopup} 告诉组件哪个state在控制弹窗的显隐 它好在必要时帮你关闭弹窗
        // title="我的弹窗" 弹窗标题
        // onConfirm={() => console.log("已确定")} 点击确定时的回调
        // <p>This is a modal content</p> 自定义弹窗内容
        <StoPopup
          closer={setShowPopup}
          title="我的弹窗"
          onConfirm={() => console.log("已确定")}
        >
          <p>This is a modal content</p>
        </StoPopup>
      )}

    </div>
  );
}
